<script setup lang="ts">
import { Refresh } from '@element-plus/icons-vue';
import {
useStatisticProcess,
useStatisticProcessExport,
useStatisticsInit
} from "@fl/api/elevator-api";
import { SubmitBtn } from "@fl/components";
import dayjs from "dayjs";
import { cloneDeep } from "lodash-es";
import type { VxeGridProps } from "vxe-table";

const dateTypeOptions = [
  {
    label: "上报时间",
    value: "20",
  },
  {
    label: "完成业主意见征询时间",
    value: "30",
  },
  {
    label: "取得可行性分析意见告知书时间",
    value: "40",
  },
  {
    label: "取得联合审查批准意见书时间",
    value: "50",
  },
  {
    label: "取得电梯使用登记时间",
    value: "60",
  },
  {
    label: "取得电梯竣工意见验收表时间",
    value: "70",
  },
  {
    label: "取得档案归档证明资料时间",
    value: "80",
  },
  {
    label: "申请补贴时间",
    value: "90",
  },
  {
    label: "补贴到账时间",
    value: "100",
  },
];
const calcTypeOptions = [
  {
    label: "当前",
    value: 1,
  },
  {
    label: "累计",
    value: 2,
  },
];
const dateType = ref("");
const gridOptions2 = reactive<VxeGridProps>({
  border: true,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { field: "areaName", title: "区（街道）" },
    { field: "submitCount", title: "需求提报(台)", sortable: true },
    { field: "ownerCount", title: "征询业主意见(台)" , sortable: true},
    { field: "feasibilityCount", title: "可行性分析(台)" , sortable: true},
    { field: "reviewCount", title: "联合审查批准意见书(台)" , sortable: true},
    { field: "useCount", title: "取得电梯使用登记(台)" , sortable: true},
    { field: "completionCount", title: "取得电梯竣工意见验收表(台)" , sortable: true},
    { field: "archiveCount", title: "取得档案归档证明资料(台)" , sortable: true},
    { field: "subsidyApplicationCount", title: "申领补贴(台)" , sortable: true},
    { field: "subsidyReceivedCount", title: "补贴到账(台)" , sortable: true},
  ],
  data: [],
  footerData:[],
  showFooter: true,
  showOverflow: true,
});
const initialProcessParams = {
  startTime: "",
  endTime: "",
  dateType: "",
  calcType:2
};
const processParams = ref(cloneDeep(initialProcessParams));
const { data: processData, isLoading: processLoading,refetch:processRefetch } = useStatisticProcess(
  processParams
); //各区（街道）安装进度
const {isLoading:initLoading ,refetch:initReftch}=useStatisticsInit()
const processExprotParams = computed(() => {
  return {
    startTime: processParams.value.startTime,
    endTime: processParams.value.endTime,
    dateType: processParams.value.dateType,
    calcType: processParams.value.calcType
  };
});
const {
  isPending: exportProgressPending,
  mutateAsync: exportProgressMutate,
} = useStatisticProcessExport(processExprotParams);
async function exportProgress() {
  const res = await exportProgressMutate();
  if (res) {
    const objectUrl = URL.createObjectURL(res);
    location.href = objectUrl;
    URL.revokeObjectURL(objectUrl);
  }
}
watchEffect(() => {

if (processData.value) {
  gridOptions2.data  = cloneDeep(processData.value.slice(0, -1));
  gridOptions2.footerData  = cloneDeep(processData.value.slice(-1));
}

});
const chooseTime = ref([]);

function reset() {
  processParams.value = cloneDeep(initialProcessParams);
  dateType.value = "";
  chooseTime.value = [];
}
async function processRefresh(){
 await initReftch()
 await processRefetch()
}

const processRefreshLoading = computed(() => {
  return initLoading.value || processLoading.value;
});
function disabledDate(time) {
  return dayjs(time).isAfter(dayjs(new Date()).format("YYYY-MM-DD"));
}
function submit() {
  processParams.value.startTime = chooseTime.value[0]
    ? chooseTime.value[0] + " 00:00:00"
    : "";
  processParams.value.endTime = chooseTime.value[1]
    ? chooseTime.value[1] + " 23:59:59"
    : "";
  processParams.value.dateType = dateType.value;
}
</script>
<template>
     <ElCard class="mb20" shadow="hover">
    <div class="font-550 mb20 text-18 flex items-center justify-between">
      <div class="flex items-center">
        各区（街道）安装进度
        <div class="filter-box ml-10 flex items-center">
          <span class="font-400"> 时间类型：</span>

          <el-select
            v-model="dateType"
            placeholder="请选择"
            size="small"
            style="width: 200px; margin-right: 10px"
          >
            <el-option
              v-for="item in dateTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            style="margin-right: 10px"
            v-model="chooseTime"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            size="small"
            :disabled="!dateType"
            :disabled-date="disabledDate"
          />

          <SubmitBtn @click="reset" :isLoading="processLoading" type="default"
            >重置</SubmitBtn
          >
          <SubmitBtn @click="submit" :isLoading="processLoading" type="primary"
            >搜索</SubmitBtn
          >
        </div>
      </div>
        <div class="flex items-center">
          <div class="custom-style mr20">
            <el-segmented v-model="processParams.calcType" :options="calcTypeOptions"/>
        </div>
          <div class="color-[#235FC4] flex items-center font-400 mr20 cursor-pointer" >
          <!-- 安装进度的刷新需要调两个接口（后台并不是实时刷新数据，所以需要掉一次暗门接口） -->
             <!-- <div>刷新</div>
            <el-icon><Refresh /></el-icon> -->
            <el-button :icon="Refresh" :loading="processRefreshLoading" @click="processRefresh">刷新</el-button>
          </div>
        <SubmitBtn
          @click="exportProgress"
          :isLoading="exportProgressPending"
          type="primary"
          >导出</SubmitBtn
        >
      </div>
    </div>
    <vxe-grid ref="xGrid" v-bind="gridOptions2" align="center" class="mb12" :loading="processLoading"> </vxe-grid>
  </ElCard>
</template>
<style scoped lang="scss">
.custom-style .el-segmented {
  --el-segmented-item-selected-color: #fff;
  --el-segmented-item-selected-bg-color: #DA0004;
  --el-border-radius-base: 16px;
}
</style>